<template>
	<view class="pages padding-tb flex flex-direction">
		<!-- <view class="currentDate margin-lr padding-lr flex justify-between align-center">
			<view class="left flex flex-direction align-center">
				<text>星期{{ getWeek() }}</text>
				<text>{{ $moment().format('YYYY-MM-DD') }}</text>
			</view>
			<view class="right">{{ time }}</view>
		</view> -->
		<view class="sign margin-lr padding-lr">
			<view class="head flex justify-start align-center">
				<!-- <text class="title margin-right-sm">签到</text> -->
				<text class="name">{{typeText[order.serves_type - 1]}}</text>
			</view>
			<view v-if="!url" class="circle flex-direction flex align-center justify-center" @tap="chooseImg"
				:class="{cur:originVal}">
				<text class="title">拍照签到</text>
				<text class="time">{{ time }}</text>
			</view>

			<view class="flex flex-direction align-center" v-if="url">
				<view class="circle circle1 flex-direction flex align-center justify-center">
					<text class="title wlIcon-31xuanze" style="font-size: 50rpx;"></text>
				</view>
				<view class="tips flex justify-center align-center"> <text class="result">打卡成功</text> </view>
				<view class="tips flex justify-center align-center" @click="previewImage"> <text
						class="result">查看打卡结果</text> </view>
				<!-- <image @tap="previewImage" style="width: 222rpx;height: 222rpx;margin-top: 26rpx;" :src="url" mode="aspectFit"></image> -->
			</view>

			<view class="tips flex align-center flex-direction" v-else>

				<view class="flex justify-start" v-if="!originVal">
					<text></text>
					<text class="wlIcon-31xuanzhong padding-left-sm"
						style="font-size: 28rpx;">已进入考勤范围：{{destination}}</text>
				</view>
				<block v-else>
					<view class="flex justify-center align-center">
						<text class="iconfont icon-wenti"></text>
						<text class="wlIcon-31tishi">您当前不在打卡范围内</text>
						<text class="margin-left-sm" @tap="gcj02">点击重新定位</text>
						<text :class="{cur:loading}" class="iconfont icon-shuaxin" style="font-size: 26rpx;"></text>
					</view>
					<view class="margin-top-xs">{{origin}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				timer: null,
				time: '',
				origin: '',
				destination: '',

				originVal: true,
				order: {},
				url: '',
				loading: false,
				typeText: ['家政服务', '医护上门', '陪诊陪护']
			};
		},
		onShow() {
			this.getTime()
			this.timer = setInterval(() => {
				this.getTime()
			}, 1000)
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null;
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null;
		},
		onLoad(option) {
			let order = JSON.parse(option.data);
			console.log(order.type)
			this.order = order;
			this.getLocation(order)
			this.$store.commit('common/setState', {
				isUpdateLocation: true
			});
		},
		methods: {
			gcj02() {
				this.loading = true;
				this.$store.dispatch('common/getLocation', 12321).then(res => {
					this.$store.commit('common/setState', {
						isUpdateLocation: false
					});
					setTimeout(() => {
						this.origin = uni.getStorageSync('formatted_address')
						this.getLocation(this.order)
						this.loading = false;
					}, 1500);
				})
			},
			chooseImg() {
				if (this.originVal) return this.$wanlshop.msg('您当前不在打卡范围内！');
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: res => {
						let url = res.tempFilePaths[0];
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								uni.getImageInfo({
									src: url,
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData: updata.data.storage ==
												'local' ? null : updata.data
												.multipart,
											success: data => {
												this.url = JSON.parse(data
													.data).data.fullurl;
												this.sign()
											},
											fail: error => {
												this.$wanlshop.msg(JSON
													.parse(error.data)
													.msg);
											}
										});
									}
								});
							}
						});
					}
				})
			},
			getLocation(order) {
				var that = this
				this.origin = uni.getStorageSync('formatted_address')
				this.destination = order.address;
				let type = this.order.type;
				let url = '';
				switch (type){
					case 'accompany':
						url = '/addons/accompany/api.Order/distance'
						break;
					case 'homeking':
						url = '/addons/homeking/api.serves/distance'
						break;
					case 'medicalvisit':
						url = '/addons/medicalvisit/api.Order/distance'
						break;
					default:
						break;
				}
				console.log(url)
				console.log({
					origin: `${this.common.location.longitude},${this.common.location.latitude}`,
					destination: `${order.lng},${order.lat}`
				})
				uni.request({
					url: url,
					method: 'POST',
					data: {
						origin: `${this.common.location.longitude},${this.common.location.latitude}`,
						destination: `${order.lng},${order.lat}`
					},
					complete: (ret) => {
						console.log(ret)
						if (ret.res.code == 0) {
							this.originVal = true
						} else {
							this.originVal = false;
						}
					}
				});
			},
			getWeek() {
				var weeks = new Array('日', '一', '二', '三', '四', '五', '六');
				var now = new Date();
				var day = now.getDay();
				var week = weeks[day];
				return week;
			},
			getTime() {
				var date = new Date();
				var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				var time = `${hour}:${min}:${sec}`;
				this.time = time;
			},
			async sign() {
				let type = this.order.type;
				let url = '';
				switch (type){
					case 'accompany':
						url = '/addons/accompany/api.Order/startService'
						break;
					case 'homeking':
						url = '/addons/homeking/api.serves/start'
						break;
					case 'medicalvisit':
						url = '/addons/medicalvisit/api.Order/startService'
						break;
					default:
						break;
				}
				console.log({
					order_id: this.order.id,
					serves_uid: this.$store.state.user.id, // 服务人员ID
					serves_type: this.order.serves_type,
					user_id: this.order.user_id,
					clock_address: this.destination,
					signpic: this.url,
					lng: this.common.location.longitude,
					lat: this.common.location.latitude
				})
				await uni.request({
					url: url,
					method: 'POST',
					data: {
						order_id: this.order.id,
						serves_uid: this.$store.state.user.id, // 服务人员ID
						serves_type: this.order.serves_type,
						user_id: this.order.user_id,
						clock_address: this.destination,
						signpic: this.url,
						lng: this.common.location.longitude,
						lat: this.common.location.latitude
					},
					success: res => {
						uni.redirectTo({
							url: `/pages/common/rtmp/transcribe?order_id=${this.order.id}&type=${this.order.type}&timestamp=${this.$moment().format('X')}&services_time=${this.order.services_time}`
						})
					}
				});
			},
			lookResult() {
				this.$util.to(`/pages/visits/sign/statistics`);
			},
			previewImage() {
				uni.previewImage({
					urls: [this.url]
				});
			},
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
		// height: 100%;
	}

	.myCanvas {
		position: fixed;
		top: 100rpx;
		left: 0;
		z-index: -1;
		opacity: 0;
	}

	.pages {
		height: 100%;

		.currentDate {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;

			.left {
				text {
					&:nth-of-type(1) {
						color: #333333;
						font-size: 40rpx;
						font-weight: bold;
					}

					&:nth-of-type(2) {
						color: #808080;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}

			.right {
				color: #333333;
				font-size: 60rpx;
				// font-weight: bold;
			}
		}

		.sign {
			// flex: 1;
			// height: 800rpx;
			padding-bottom: 30rpx;
		}

		.sign,
		.signs {
			background-color: #fff;
			border-radius: 10rpx;

			// padding: 20rpx 30rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}

			.head {
				height: 100rpx;

				.title {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}

				.name {
					color: #3D7EFF;
					border: 1rpx solid #3D7EFF;
					border-radius: 10rpx;
					font-size: 24rpx;
					padding: 2rpx 16rpx;
				}

				.time {
					color: #808080;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}

			.circle {
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
				background: linear-gradient(180deg, #6dda86 0%, #4cbd66 100%);
				box-shadow: 0px 3px 6px 1px rgba(61, 126, 255, 0.39);
				margin: 100rpx auto 40rpx;

				&.cur {
					background: linear-gradient(90deg, #bec5cd 0%, #979dac 100%);
				}

				.title {
					color: #FFFFFF;
					font-weight: bold;
					font-size: 44rpx;
				}

				.time {
					color: #FFFFFF;
					font-size: 28rpx;
					margin-top: 10rpx;
				}

				.iconfont {
					font-size: 140rpx;
					font-weight: normal;
					margin-top: 0;
				}
			}

			.circle1 {
				width: 144rpx;
				height: 144rpx;
				margin-bottom: 0;

				.iconfont {
					font-size: 60rpx;
				}
			}

			.tips {
				margin-top: 50rpx;
				font-size: 26rpx;

				.iconfont {
					font-size: 40rpx;
				}

				text {
					&:nth-of-type(1) {
						color: red;
					}

					&:nth-of-type(3),
					&:nth-of-type(4) {
						color: #3D7EFF;
					}

					&:nth-of-type(4) {
						font-size: 32rpx;
					}
				}

				.result {
					color: #3D7EFF !important;
				}
			}
		}


		.signs {
			.padding-bottom {
				text {
					&:last-child {
						font-size: 24rpx;
						color: #808080;
					}

					&:first-child {
						font-size: 40rpx;
						color: #808080;
					}
				}
			}

			.head {
				height: 90rpx;
				box-sizing: border-box;
			}
		}
	}

	.wlIcon-31xuanzhong {
		&:before {
			color: #4cbd66;
			margin-right: 10rpx;
		}
	}

	.wlIcon-31tishi {
		&:before {
			color: #f00;
			margin-right: 10rpx;
			font-size: 30rpx;
		}
	}

	.icon-shuaxin.cur {
		animation-name: spin;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>